<template>
  <div class="couple-life-tool">
    <h1>夫妻生活记录与代办事项</h1>
    <!-- 输入框和添加按钮 -->
    <div class="input-section">
      <input v-model="newItem" placeholder="输入生活记录或代办事项" />
      <button @click="addItem">添加</button>
    </div>
    <!-- 事项列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <span>{{ item }}</span>
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义事项列表
const items = ref<string[]>([]);
// 定义新事项输入框的值
const newItem = ref('');

// 添加事项的函数
const addItem = () => {
  if (newItem.value.trim() !== '') {
    items.value.push(newItem.value);
    newItem.value = '';
  }
};

// 删除事项的函数
const deleteItem = (index: number) => {
  items.value.splice(index, 1);
};
</script>

<style scoped>
.couple-life-tool {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.input-section {
  display: flex;
  margin-bottom: 20px;
}

.input-section input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-section button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.input-section button:hover {
  background-color: #0056b3;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

li span {
  flex: 1;
}

li button {
  padding: 5px 10px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

li button:hover {
  background-color: #c82333;
}
</style>